<template>
	<view @click="blur">
		<view class="block">
			<view class="block-title" style="background-color: #7E68E5;">
				集团信息
			</view>
			<view class="block-content">
				<div class="tab-nav uni-flex">
						<div class="tab-item" v-if="objList[2]" @click="yysChange(2)" :class="yys==2?'active-item':''"><text
								:class="ydstatus==2?'edit':''">移动</text></div>
						<div class="tab-item" v-if="objList[3]" @click="yysChange(3)" :class="yys==3?'active-item':''"><text
								:class="ltstatus==2?'edit':''">联通</text></div>
						<div class="tab-item" v-if="objList[1]" @click="yysChange(1)" :class="yys==1?'active-item':''"><text
								:class="dxstatus==2?'edit':''">电信</text></div>
				</div>
				<template v-if="groupType==1">
					<view class="info-content" :class="objList[yys].status==2?'edit-block':''"
						style="margin-top: 18rpx;padding-bottom: 18rpx;">
						<view class="group-info-item uni-flex">
							<text class="info-item-title">状态：</text>
							<text class="info-item-content">{{objList[yys].status==0?'处理中':objList[yys].status==1?'已通过':'未通过'}}</text>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].status==2?'edit-info-item':''">
							<text class="info-item-title">集团名称：</text>
							<view class="info-item-content" :class="objList[yys].status==2?'edit-info-item':''">
								<text v-if="objList[yys].status!=2">{{objList[yys].name}}</text>
								<input v-else placeholder="请输入集团名称" @input="circleChange($event,'name')" :value="objList[yys].name">
							</view>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].status==2?'edit-info-item':''">
							<text class="info-item-title">联系人：</text>
							<view class="info-item-content">
								<text v-if="objList[yys].status!=2">{{objList[yys].adminname}}</text>
								<input v-else placeholder="请输入联系人" @input="circleChange($event,'adminname')" :value="objList[yys].adminname">
							</view>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].status==2?'edit-info-item':''">
							<text class="info-item-title">联系电话：</text>
							<view class="info-item-content">
								<text v-if="objList[yys].status!=2">{{objList[yys].adminphone}}</text>
								<input v-else type="number" maxlength="11" placeholder="请输入联系电话" @input="circleChange($event,'adminphone')" :value="objList[yys].adminphone">
							</view>
						</view>
						<view class="group-info-item uni-flex edit-info-item" v-if="objList[yys].status==2">
							<text class="info-item-title">客户确认涵：</text>
							<view class="info-item-content flex">
								<view class="uni-flex align-center" style="width:200rpx;flex-grow:1;">
									<view class="upload-btn" @click="uploadImage">点击上传</view>
									<view class="file-name">{{imgName}}</view>
								</view>
								<view @click="saveFile('https://img.xnhkfpt.com/lvdata/CRM_TEMPLATE.xls')" class="template-download uni-flex justify-between align-center">
									模板下载<view class="download-icon"><uni-icons class="center" type="arrow-down" color="#fff" size="8"></uni-icons></view>
								</view>
							</view>
						</view>
						<view class="group-info-item uni-flex">
							<text class="info-item-title">提交时间：</text>
							<text class="info-item-content">{{objList[yys].createTime}}</text>
						</view>
						<view class="member-count" v-if="yys==1">
							{{'共'+memberObj.memberall_dianxin+'个成员,'+memberObj.memberopen_dianxin+'个成员已加入'}}</view>
						<view class="member-count" v-if="yys==2">
							{{'共'+memberObj.memberall_yidong+'个成员,'+memberObj.memberopen_yidong+'个成员已加入'}}</view>
						<view class="member-count" v-if="yys==3">
							{{'共'+memberObj.memberall_liantong+'个成员,'+memberObj.memberopen_liantong+'个成员已加入'}}</view>
						<view class="submit-btn" @click="saveCircle" v-if="objList[yys].status==2">提交</view>
					</view>
				</template>
				<template v-if="groupType==2">
					<view class="info-content edit-block" :class="objList[yys].STATUS_TYPE==2?'edit-block':''" style="margin-top: 18rpx;padding-bottom: 18rpx;">
						<view class="group-info-item uni-flex">
							<text class="info-item-title">状态：</text>
							<text class="info-item-content">{{objList[yys].STATUS_TYPE==0?'处理中':objList[yys].STATUS_TYPE==1?'已通过':objList[yys].STATUS_TYPE==2?'未通过':objList[yys].STATUS_TYPE==3?'审核中':'待支付'}}</text>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].status==2?'edit-info-item':''">
							<text class="info-item-title">集团名称：</text>
							<view class="info-item-content">
								<text v-if="objList[yys].STATUS_TYPE!=2">{{objList[yys].CIRCLE_NAME}}</text>
								<input v-else placeholder="请输入集团名称" @input="circleChange($event,'CIRCLE_NAME')" :value="objList[yys].CIRCLE_NAME">
							</view>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].STATUS_TYPE==2?'edit-info-item':''">
							<text class="info-item-title">联系人：</text>
							<view class="info-item-content">
								<text v-if="objList[yys].STATUS_TYPE!=2">{{objList[yys].ADMIN_NAME}}</text>
								<input v-else placeholder="请输入联系人" @input="circleChange($event,'ADMIN_NAME')" :value="objList[yys].ADMIN_NAME">
							</view>
						</view>
						<view class="group-info-item uni-flex" :class="objList[yys].STATUS_TYPE==2?'edit-info-item':''">
							<text class="info-item-title">联系电话：</text>
							<view class="info-item-content">
								<text v-if="objList[yys].STATUS_TYPE!=2">{{objList[yys].ADMIN_PHONE}}</text>
								<input v-else type="number" maxlength="11" @input="circleChange($event,'ADMIN_PHONE')" :value="objList[yys].ADMIN_PHONE">
							</view>
						</view>
						<view class="group-info-item uni-flex">
							<text class="info-item-title">提交时间：</text>
							<text class="info-item-content">{{objList[yys].createTime}}</text>
						</view>
						<view class="member-count" v-if="yys==1">
							{{'共'+memberObj.memberall_dianxin+'个成员,'+memberObj.memberopen_dianxin+'个成员已加入'}}</view>
						<view class="member-count" v-if="yys==2">
							{{'共'+memberObj.memberall_yidong+'个成员,'+memberObj.memberopen_yidong+'个成员已加入'}}</view>
						<view class="member-count" v-if="yys==3">
							{{'共'+memberObj.memberall_liantong+'个成员,'+memberObj.memberopen_liantong+'个成员已加入'}}</view>
						<view class="submit-btn" @click="saveCircle" v-if="objList[yys].STATUS_TYPE==2">提交</view>
					</view>
				</template>
			</view>
		</view>

		<view class="block">
			<view class="block-title" style="background-color: #985CD1;">
				成员管理
			</view>
			<view class="block-content search-block">
				<view class="search-para uni-flex justify-between">
					<view class="search-wrap">
						<view class="input-wrap uni-inline-item">
							<input type="text" @click.stop :value="searchData.mobile" @input="keywordInput"
								@focus.stop="querySearchKeyList" class="keyword-input">
							<view class="search-btn" @click="searchMember">查询</view>
						</view>
						<div class="search-key-wrap" v-if="showSearchKeyRecord" @click.stop>
							<view class="clear">
								<view class="no-history" v-if="!searchKeyList.length">暂无记录</view>
								<view class="search-key-item" :key="item.searchkeyUid"
									@click="selectSearchKey(item.keyname)" v-for="(item,index) in searchKeyList">
									{{item.keyname}}</view>
							</view>
						</div>
					</view>
					<navigator url="/pages/addmember/addmember" class="add-group uni-inline-item justify-center">
						<uni-icons type="plusempty" color="#5374F7" size="14"></uni-icons>添加成员
					</navigator>
				</view>
				<div class="uni-flex">
					<view class="btn btn-large" style="margin-right: 40rpx;">集团成员短信通知</view>
					<view class="btn btn-large">批量刷新</view>
				</div>
			</view>
			<view class="member-list">
				<view class="info-block" :key="index" v-for="(item,index) in memberList">
					<view class="member-info uni-flex">
						<view class="member-info-item uni-flex">
							<text class="info-title">成员：</text>
							<view class="member-info-content  uni-flex align-center">{{item.MOBILE}}<image @click="copy(item.MOBILE)" class="copy-icon" :src="require('./images/copy.svg')"></image></view>
						</view>
						<view class="member-info-item uni-flex">
							<text class="info-title">运营商：</text>
							<text class="member-info-content">{{item.PHONE_TYPE==1?'电信':item.PHONE_TYPE==2?'移动':'联通'}}</text>
						</view>
						<view class="member-info-item uni-flex">
							<text class="info-title">企业彩铃：</text>
							<text class="member-info-content">{{item.ISRINGUSER==1?'已开通':item.ISRINGUSER==2?'未开通':'开通失败'}}</text>
						</view>
						<view class="member-info-item uni-flex">
							<text class="info-title">铃音设置：</text>
							<text class="member-info-content">{{item.RINGSTATE==1?'已设置':'未设置'}}</text>
						</view>
					</view>
					<div class="btn-wrap uni-flex justify-between">
						<view class="btn">刷新</view>
						<view class="btn">铃音设置</view>
						<view class="btn">下发短信</view>
						<view class="btn" @click="goMemberDetail(index)">详情</view>
					</div>
				</view>
				<div class="see-more uni-inline-item justify-center" @click="loadMoreMember"
					v-if="searchData.pagenow<memberTotalPage">查看更多<view class="more-arrow uni-inline-item">》</view>
				</div>
				<view class="no-more" v-if="searchData.pagenow==memberTotalPage">没有更多了…</view>
			</view>
		</view>
		
		<view class="block">
			<view class="block-title" style="background-color: #A951BC;">
				铃音管理
			</view>
			<view class="block-content ring-top uni-flex align-center justify-between">
				<div class="tab-nav uni-flex justify-arround">
					<div class="tab-item" @click="ringYysChange(2)" :class="searchData2.phonetype==2?'active-item':''"><text
							:class="ydstatus==2?'edit':''">移动</text></div>
					<div class="tab-item" @click="ringYysChange(3)" :class="searchData2.phonetype==3?'active-item':''"><text
							:class="ltstatus==2?'edit':''">联通</text></div>
					<div class="tab-item" @click="ringYysChange(1)" :class="searchData2.phonetype==1?'active-item':''"><text
							:class="dxstatus==2?'edit':''">电信</text></div>
				</div>
				<navigator url="/pages/addring/addring" class="add-group uni-inline-item justify-center">
					<uni-icons type="plusempty" color="#5374F7" size="14"></uni-icons>添加铃音
				</navigator>
			</view>
			<view class="member-list">
				<view class="info-block" :key="index" v-for="(item,index) in ringList">
					<view class="member-info uni-flex">
						<view style="width: 100%;" class="member-info-item uni-flex align-center justify-between">
							<text class="ring-name">音频</text>
							<text style="color: #666;">音频</text>
							<text style="color: #999;">等待上传</text>
						</view>
						<view class="member-info-item uni-flex" style="margin-bottom: 0;">
							<text class="info-title">提交时间：</text>
							<text class="member-info-content">{{item.PHONE_TYPE==1?'电信':item.PHONE_TYPE==2?'移动':'联通'}}</text>
						</view>
					</view>
					<div class="btn-wrap uni-flex justify-between">
						<view class="btn">分享</view>
						<view class="btn">视频播放</view>
						<view class="btn">下载</view>
						<view class="btn">复制</view>
						<view class="btn">删除</view>
					</div>
				</view>
				<div class="see-more uni-inline-item justify-center" @click="loadMoreMember"
					v-if="searchData.pagenow<memberTotalPage">查看更多<view class="more-arrow uni-inline-item">》</view>
				</div>
				<view class="no-more" v-if="searchData.pagenow==memberTotalPage">没有更多了…</view>
			</view>
		</view>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import qs from 'qs'
	import {baseUrl,checkNumber,saveFile,encryptDes} from '../../common/util.js'
	export default {
		data() {
			return {
				groupType: 1,
				yys: 2,
				memberLoading: false,
				ringLoading: false,
				memberTotalPage: 0,
				ringTotalPage: 0,
				imgName:'',
				objList: ['', '', '', ''],
				ydstatus: 0,
				ltstatus: 0,
				dxstatus: 2,
				msgType:'error',
				messageText:'',
				saving:false,
				showSearchKeyRecord: false,
				searchKeyList: [],
				memberObj: {},
				searchData: {
					circleid: '',
					pagenow: 1,
					shownum: 10,
					mobile: '',
					phone_type: ''
				},
				memberList: [],
				searchData2: {
					circleid: '',
					pagenow:1,
					shownum:10,
					phonetype:2,
					phonetypeflag:1,
				},
				ringList: [{}],
			}
		},
		onLoad(option){
			this.groupType=option.grouptype
			this.searchData.circleid=option.circleid
			this.searchData2.circleid=option.circleid
		},
		mounted() {
			this.queryCircleInfo()
			this.getMemberList()
			this.getRingList()
		},
		methods: {
			messageToggle(message,msgType) {
				this.messageText = message
				if(msgType){
					this.msgType=msgType
				}else{
					this.msgType='error'
				}
				this.$refs.message.open()
			},
			blur() {
				this.showSearchKeyRecord = false
			},
			queryCircleInfo() {
				this.$request[this.groupType==1?'queryCircleInfo':'queryQWVedioCircleInfo']({
					circleid: this.searchData.circleid,
					circle_uid:this.searchData.circleid,
				}).then(res => {
					if (res.code == 0) {
						var list = res.objlist||res.objcirclelist
						list.forEach(item => {
							item.createTime = (item.createTime||item.INPUT_TIME).split(' ')[0]
							item.status=2
							item.STATUS_TYPE=2
							this.objList[item.phonetype||item.PHONE_TYPE] = item
						})
						console.log(this.objList)
						this.dxstatus = this.objList[1] ? (this.objList[1].status||this.objList[1].STATUS_TYPE): ''
						this.ydstatus = this.objList[2] ?  (this.objList[2].status||this.objList[2].STATUS_TYPE) : ''
						this.ltstatus = this.objList[3] ?  (this.objList[3].status||this.objList[3].STATUS_TYPE) : ''
						this.memberObj = res.objsumpd
						if(this.objList[1]){
							this.yys=1
						}
						if(this.objList[3]){
							this.yys=3
						}
						if(this.objList[2]){
							this.yys=2
						}
					} else {

					}
				})
			},
			yysChange(yys) {
				if (this.yys != yys) {
					this.yys = yys
					this.imgName=''
				}
			},
			circleChange(e,prop){
				this.objList[this.yys][prop]=e.detail.value
			},
			saveCircle(){
				console.log(888)
				if(this.saving){
					return
				}
				var obj=this.objList[this.yys]
				if(this.groupType==1){
					console.log(obj)
					if(!obj.name){
						this.messageToggle('请输入集团名称')
						return
					}
					if(!obj.adminname){
						this.messageToggle('请输入联系人')
						return
					}
					if(!obj.adminphone){
						this.messageToggle('请输入联系电话')
						return
					}
					if(!obj.knowpageuri){
						this.messageToggle('请上传客户确认涵')
						return
					}
					var form={
						detailcircleid:obj.detailcircleid,
						circlename:obj.circlename,
						adminname:obj.adminname,
						adminphone:obj.adminphone,
						knowpageuri:obj.knowpageuri
					}
				}
				else{
					console.log(obj)
					if(!obj.CIRCLE_NAME){
						this.messageToggle('请输入集团名称')
						return
					}
					if(!obj.ADMIN_NAME){
						this.messageToggle('请输入联系人')
						return
					}
					if(!obj.ADMIN_PHONE){
						this.messageToggle('请输入联系电话')
						return
					}
					var form={
						circle_id:obj.CIRCLE_ID,
						circle_name:obj.CIRCLE_NAME,
						admin_name:obj.ADMIN_NAME,
						admin_phone:obj.ADMIN_PHONE,
					}
				}
				console.log(1234)
				this.saving=true
				this.$request[this.groupType==1?'saveCircle':'saveQWVedioCircle'](form)
				.then(res=>{
					if(res.code==0){
						this.messageToggle('提交成功','success')
						this.queryCircleInfo()
						this.imgName=''
					}else{
						this.messageToggle(res.msg)
					}
					this.saving=false
				})
			},
			ringYysChange(yys){
				if (this.searchData2.phonetype != yys) {
					this.searchData2.phonetype = yys
				}
				this.searchRing()
			},
			copy(text){
				wx.setClipboardData({
				  data: text,
				  success:res=>{
				    uni.showToast({
				    	title:'复制成功',
						icon:'success',
						duration:2000,
				    })
				  }
				})
			},
			keywordInput(event) {
				this.searchData.mobile = event.detail.value
			},
			selectSearchKey(key) {
				this.showSearchKeyRecord = false
				this.searchData.mobile = key
				this.searchMember()
			},
			loadMoreMember() {
				this.searchData.pagenow++
				this.getMemberList()
			},
			searchMember() {
				this.searchData.pagenow = 1
				this.memberList = []
				this.memberTotalPage = 0
				console.log()
				this.getMemberList()
			},
			getMemberList() {
				console.log(this.searchData)
				this.memberLoading = true
				if (this.searchData.mobile) {
					this.saveSearchKey()
				}
				this.$request[this.groupType == 1 ? 'queryMemberList' : 'queryQWVedioMemberList'](this.searchData)
					.then(res => {
						if (res.code == 0) {
							var list = res.objlist || []
							console.log(this.memberList)
							this.memberList = this.memberList.concat(list)
							this.memberTotalPage = res.pagenum
						}
						this.memberLoading = false
					})
			},
			querySearchKeyList() {
				this.$request.querySearchKeyList({
					circletype: 2,
					pagenow: 1,
					shownum: 10,
				}, this.groupType).then(res => {
					if (res.code == 0) {
						this.searchKeyList = res.objlist
						this.showSearchKeyRecord = true
					}
				})
			},
			saveSearchKey() {
				this.$request.saveSearchKey({
					keyname: this.searchData.mobile,
					circletype: 2,
				}, this.groupType)
			},
			goMemberDetail(index){
				uni.setStorageSync('memberinfo',JSON.stringify(this.memberList[index]))
				uni.navigateTo({
					url:'/pages/memberdetail/memberdetail'
				})
			},
			loadMoreRing() {
				this.searchData2.pagenow++
				this.getRingList()
			},
			searchRing() {
				this.searchData2.pagenow = 1
				this.ringList = []
				this.ringTotalPage = 0
				this.getRingList()
			},
			getRingList() {
				console.log(this.searchData2)
				this.ringLoading = true
				this.$request[this.groupType == 1 ? 'queryRingList' : 'queryQWVedioRingList'](this.searchData2)
					.then(res => {
						if (res.code == 0) {
							var list = res.objlist || []
							this.ringList = this.ringList.concat(list)
							this.ringTotalPage = res.pagenum
						}
						this.ringLoading = false
					})
			},
			saveFile:saveFile,
			uploadFile(filePath,index){
				var queryParams=qs.stringify({
					param: encryptDes(JSON.stringify({
						parampd: '',
						producttype: 'ring'
					})),
					login_name: 'xnhsmallpro'
				});
				uni.uploadFile({
					url: baseUrl + '/tools/btachUpload?'+queryParams,
					filePath:filePath,
					name:'file',
					header: {
						'Authorization': uni.getStorageSync("token"),
					},
				}).then(res=>{
					if(res[1]&&res[1].statusCode==200){
						var data=JSON.parse(res[1].data)
						if(data.code == 0){
							if(data.objlist&&data.objlist[0]&&data.objlist[0].code==0){
								var path=data.objlist[0].uploadpath
								this.imgName=data.objlist[0].filename
								this.objList[index].knowpageuri=path
							}else{
								this.messageToggle('上传失败')
							}
						}else {
							this.messageToggle(data.msg)
						}
					}else{
						this.messageToggle('上传失败')
					}
					
				}).catch(err=>{
					this.messageToggle('上传失败')
				})
			},
			uploadImage(){
				wx.chooseImage({
					count:1,
					success:res=>{
						console.log(res)
						var tempFilePath = res.tempFilePaths[0]
						this.uploadFile(tempFilePath,yys)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './groupdetail.scss'
</style>
